<template>
	<ls-page title='我的'  :hidden="true"  :userIdentity='3' leftIcon='' :autoBack='false'>
		<view class="page-content">
			<!-- 用户信息start -->
			<view class="userInfo-box" @click="toinfoPath">
				<image class="logo" :src="userInfo.attachment ? userInfo.attachment :  'https://oss.jtmckj.com/wmp/images/common/i_default_avatar.png' " mode=""></image>
				<view class="">
					<view class="user-flex">
						<view class="userName">
							{{userInfo.name}}
						</view>
						<image class="arrow-action" src="https://oss.jtmckj.com/wmp/kbq/center/i_icon_right.png"
							mode=""></image>
					</view>
					<image class="grade" src="https://oss.jtmckj.com/wmp/kbq/center/i_icon_vip.png" mode=""></image>
				</view>
			</view>
			<!-- 用户信息end -->
			<!-- 会员卡start -->
			<view class="member-continar"
			    :style="{ backgroundImage: 'url(' + userInfo?.backgroundAtt2 + ')' }"
				> 
				<view class="member-codebox">
					<image class="logo" :src="shopInfo.attachment" mode=""></image>
					<view class="member-flex-box">
						<view class="title-flex" v-if="userInfo">
							<view :class="['title', userInfo.carName.length > 9 ? 'ani' : '']">
								{{userInfo.carName}}
							</view>
							<image v-if="cardList.length>1" class="showicon" src="https://oss.jtmckj.com/h5-uniapp/center/i_icon_cahngeCar.png" mode="" @click="changeCar"></image>
						</view>
						<view class="member-code">
							{{userInfo.code}}
						</view>


					</view>
				</view>
				<view class="equity-box" v-show="showUp">
					<view class="equity-text" >
						权益内容：
					</view>
					<view class="equity-icon" @click="upShow = true">
						?
					</view>
				<!-- 	<view class="below-item-tip" v-if="showAmt">
						<view class="tip-title">本金金额：{{ userInfo.currentAmt}}</view>
						<view class="tip-title">赠送金额：{{ userInfo.currentPresentAmt }}</view>
					</view> -->
					<view class="equity-up" @click="levelUp">
						升级
					</view>
				</view>
				   <view class="card-equity-vip" v-if="userInfo.memberIsPayCard == '1'">
					<view class="cardDate" v-if="!(themeInfo == '002' || themeInfo == '003')">
					  <view>权益卡到期时间：{{dayjs(userInfo.payCardExpireDate).format('YYYY-MM-DD HH:mm:ss')}}</view>
					</view>
					<view @click="levelUp" class="cardPay"  v-if="shopInfo.orgCode != '0024' && shopInfo.orgCode != '0025' && shopInfo.orgCode != '0021' && themeInfo != '002' && themeInfo != '003'">
					  续费
					</view>
				  </view>

				<!-- 会员卡额度 -->
				<view class="main-card-below"   :style="{ 'margin-top': userInfo.memberIsPayCard == '1' ? '30rpx' : '80rpx' }">
					<view class="card-below-item" @click="toheaderPath(1)">
						<view class="below-item-value">{{userInfo.currentAmtAct}}</view>
						<view class="below-item-title">余额(元)</view>
						<view class="below-item-icon" @click.stop="showTip">?</view>
						<view class="below-item-tip" v-if="showAmt">
							<view class="tip-title">本金金额：{{ userInfo.currentAmt}}</view>
							<view class="tip-title">赠送金额：{{ userInfo.currentPresentAmt }}</view>
						</view>
					</view>
					<view class="card-below-item" @click="toheaderPath(2)">
						<view class="below-item-value">{{userInfo.ticketCount}}</view>
						<view class="below-item-title">优惠券</view>
					</view>
					<view class="card-below-item" @click="toheaderPath(3)">
						<view class="below-item-value" >{{userInfo.currentCoins}}</view>
						<view class="below-item-title" >金币</view>
					</view>
					<view class="card-below-item" @click="toheaderPath(4)">
						<view class="below-item-value">{{userInfo.currentPoint}}</view>
						<view class="below-item-title">积分</view>
					</view>
				</view>
				<!-- 会员卡额度 -->
				<image class="barcode" @click="tobarCode" src="https://oss.jtmckj.com/wmp/kbq/center/i_icon_code.png" mode=""></image>
			</view>
			<!-- 会员卡end -->
			<!-- 导航栏一start -->
			<view class="member-card">
				<view class="grid-item" v-for="(navItem,navIndex) in navList" :key="navIndex" @click="toPath(navItem)">
					<image :src="navItem.icon" mode="aspectFill">
					</image>
					<text class="grid-text">{{navItem.title}}</text>
				</view>
			</view>
			<!-- 导航栏一end -->
			<!-- 权益卡升级start -->
			<view class="equity-card" v-show="showUp" :style="{ backgroundImage: 'url(' + userInfo.backgroundAtt + ')' }" @click="levelUp">
				<view class="equity-btn">
					立即升级
				</view>
			</view>
			<!-- 权益卡升级end -->
			<!--导航栏二start -->
             <view class="member-card2">
             	<view class="grid-item" v-for="(navItem,navIndex) in artList" :key="navIndex" @click="toPath(navItem)">
             		<image :src="navItem.icon" :style="{ width: navItem.width }"  mode="aspectFill">
             		</image>
             		<text class="grid-text">{{navItem.title}}</text>
             	</view>
             </view>
			<!-- 导航栏二end -->
           
		   <!-- 关于我们 -->
		   <aboutPop :show="aboutShow" :aboutModal="aboutModal" :closeOnClickOverlay="true" @update:show="aboutShow = $event" :aboutInfo="aboutData" />
		   <upPop v-if="upShow" :show="upShow" @update:show="upShow = $event" @upFine="upFine(e)"/>
		   

		</view>
	</ls-page>

</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { HFiveMemberAppObjProcess } from '@/api/public.js'
	import wx from "weixin-js-sdk";
	import dayjs from 'dayjs';
	
	const themeInfo = ref(uni.getStorageSync('themeInfo')?.type)
	// -----------------------------------------------------  升级会员卡 ----------------------------------------------------------------
	const showUp = computed(()=>{  // 是否显示升级权益卡
		 // cardType 1品牌卡(没有升级权益卡功能)  2门店卡   memberIsPayCard 是否权益会员 1是 0否  isPayCard  1可以升级权益卡 0不能升级权益卡
		if(userInfo.value.cardType == 2 && userInfo.value.memberIsPayCard == "0" && userInfo.value.isPayCard == "1"){
			return true
		}else{
			return false
		}
		// return true
	})
	const upFine = (e)=>{
		if(e){
			getUserInfo()
		}
	}
	const upShow = ref(false) 
	
	const levelUp = ()=>{
		upShow.value = true
		console.log(upShow.value);
	}
	
	const shopInfo = uni.getStorageSync('shopInfo') //门店信息
	
	const userInfo = ref('')
	const cardList = ref([])
	const aboutModal = ref({})
	// --------------------------------------------------  获取、切换会员信息  ---------------------------------------------------
	const getUserInfo = async()=>{
		const res = await HFiveMemberAppObjProcess({"functionName": "MemberInfo_H5","contentData": ""})
		console.log(res);
		uni.setStorageSync('cardInfo', res[0])
		userInfo.value = res[0]
		cardList.value = res
	}
	// 切换会员卡 只有品牌卡和门店卡
	const changeCar = ()=>{
		if(userInfo.value.cardType == cardList.value[0].cardType){
			userInfo.value = cardList.value[1]
		}else{
			userInfo.value = cardList.value[0]
		}
		uni.setStorageSync('cardInfo', userInfo.value)
		
	}
	
	
	//获取关于我们
	 const getGetBaseConfigInfo = () =>{
	    HFiveMemberAppObjProcess({
	      functionName: "GetBaseConfigInfo_H5",
	      contentData: {  },
	    }).then((res) => {
			aboutModal.value = res.companyFilingInfo
	          console.log(res,'res------------')
	    });
	  }

	onLoad((options) => {
		console.log( uni.getStorageSync('cardInfo'));
		console.log('onLoad...my...：') 
		if(options){
			console.log('options：',options)
			// toRegister() // 去注册
		} 
		getGetBaseConfigInfo()
	});
	onShow(() => {
		if(uni.getStorageSync('aliPayFinish')){
			upShow.value = false
			uni.removeStorageSync('aliPayFinish')
		}
		console.log('欢迎来到我的页面：token等所有参数重新获取。onShow...my...：')
		getGetBaseConfigInfo()
		getUserInfo()
	}); 
	
	const showTip = ()=>{
		showAmt.value = !showAmt.value
	}

 
	const navList = ref([])
	
	const  artList = ref([
     
    ])
	
	if(uni.getStorageSync('themeInfo')?.type == '001') {
		   navList.value = [{
					icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_rechar.png",
					title: "会员储值",
				},
				{
					icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_que.png",
					title: "排队取号",
				},
				{
				  icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_myCard.png",
				  title: "我的会员卡",
				},
				{
				  url: '/pages/home/signin/signin',
				  icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_sign.png",
				  title: "签到",
				},
				// {
				// 	icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_storeOther.png",
				// 	title: "他人储值",
				// },
			]
			
	
	   artList.value  = [
		   {
		      icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_pre.png",
		      title: "我的预订",
		    },
		    {
		      icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_wine.png",
		      title: "存取酒记录",
		    },
		    {
		      icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_myOrder.png",
		      title: "我的订单",
		    },
		    {
		      icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_line.png",
		      title: "排队记录",
		    },
		    // {
		    //   icon: "https://oss.jtmckj.com/wmp/ch/center/i_icon_feed.png",
		    //   title: "投诉建议",
		    // },
		    // {
		    //   icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_tip.png",
		    //   title: "开发票",
		    // },
		    
		   {
		   	icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_pre.png",
		   	title: "预订",
		   },
		    {
		      icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_shop.png",
		      title: "优惠商城",
		    },
		    {
		      icon: "https://oss.jtmckj.com/h5-uniapp/qnig/my/i_art_us.png",
		      title: "关于我们",
		   		width:'63rpx'
		    },
			{
			  icon: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/song.png",
			  title: "点歌打赏",
			},
	   ]
	
	}   else {
		   navList.value =  [{
				icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_rechar.png",
				title: "会员储值",
			},
			{
				icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_que.png",
				title: "排队取号",
			},
			{
			  icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_myCard.png",
			  title: "我的会员卡",
			}
			,
			// {
			// 	icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_storeOther.png",
			// 	title: "他人储值",
			// },
			{
			  icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_pre.png",
			  title: "我的预订",
			}
		]
		
		   artList.value  =  [
	      {
	        icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_wine.png",
	        title: "存取酒记录",
	      },
	      {
	        icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_myOrder.png",
	        title: "我的订单",
	      },
	      {
	        icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_line.png",
	        title: "排队记录",
	      },
	      // {
	      //   icon: "https://oss.jtmckj.com/wmp/ch/center/i_icon_feed.png",
	      //   title: "意见反馈",
	      // },
	      // {
	      //   icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_tip.png",
	      //   title: "开发票",
	      // },
	      {
	        url: '/pages/home/signin/signin',
	        icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_sign.png",
	        title: "签到",
	      },
	     {
	     	icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_pre.png",
	     	title: "预订",
	     },
	      {
	        icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_shop.png",
	        title: "优惠商城",
	      },
	      {
	        icon: "https://oss.jtmckj.com/wmp/kbq/center/i_art_us.png",
	        title: "关于我们",
	      },
		  {
		    icon: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/song.png",
		    title: "点歌打赏",
		  },
	    ]
	}
	
	const showAmt = ref(false)
	const aboutShow = ref(false)
	
	// 关于信息数据
	const aboutData = {
	  companyName: 'My Company',
	  version: '2.1.0',
	  phone: '9876543210',
	  publicSecurityNumber: '公安备案号ABC123',
	  subjectRecordNumber: '主体备案号XYZ456'
	};
	
	const toPath = (v)=> {
		if(v.title == '会员储值') {
			 uni.navigateTo({
			 	url:'/subpkg/view/centerStore/centerStore'
			 })
		} else if(v.title == '排队取号') {
			uni.navigateTo({
				url:'/subpkg/view/lineupMember/lineupMember'
			})
		} else if(v.title == '他人储值') {
			uni.navigateTo({
				url:'/subpkg/view/otherStore/otherStore'
			})
			
		} else if (v.title == '我的预订') {
			uni.navigateTo({
				url:'/subpkg/view/myreserVation/myreserVation'
			})
		}  else if (v.title == '存取酒记录') {
			uni.navigateTo({
				url:'/subpkg/view/accessCohol/accessCohol'
			})
		} else if (v.title == '我的订单') {
			uni.switchTab({
				url:'/pages/order/index'
			})
		}  else if (v.title == '排队记录') {
			uni.navigateTo({
				url:'/subpkg/view/queueRecord/queueRecord'
			})
		} else if (v.title == '签到') {
			if(shopInfo && shopInfo.brandCode == '0003'){
				uni.showToast({title:'请前往群签到',icon:'none'})
				return
			}
			
			HFiveMemberAppObjProcess({
			  functionName: "GetActivityList_H5",
			  contentData: {  },
			}).then((res) => {
				if(res && res[0] && res[0].code){
					uni.navigateTo({
						url:'/subpkg/view/activitySign/activitySign'
					})
				}else{
					uni.showToast({title:'暂无签到活动',icon:'none'})
				}
			});
			
			
		} else if (v.title == '我的会员卡') {
			uni.navigateTo({
				url:'/subpkg/view/mymemberCard/mymemberCard'
			})
		}  else if (v.title == '优惠商城') {
			uni.navigateTo({
			  url: '/pagesPointShop/view/index'
			});
		} else if (v.title == '关于我们') {
			  aboutShow.value = true
		} else if (v.title == '预订') {
			 uni.navigateTo({
			 	url:'/subpkg/view/book/book'
			 })
		}   else if (v.title == '点歌打赏') {
			uni.navigateTo({
				url:'/subpkg/view/gift/gift'
			})
		}
		
	}
	
	const toheaderPath = (v)=> {
		 if(v == 1) {
			 uni.navigateTo({
			 	url:'/subpkg/view/transRecords/transRecords'
			 })
		 } else if (v == 2 ) {
			uni.switchTab({
				url:'/pages/coupon/index'
			})
		} else if (v == 3 ) {
			uni.navigateTo({
				url:'/subpkg/view/coldcoinDetai/coldcoinDetai'
			})
		} else if (v == 4 ) {
			uni.navigateTo({
				url:'/subpkg/view/pointsDetail/pointsDetail'
			})
		}
	}
	
	
	const tobarCode = ()=> {
		uni.navigateTo({
			url:'/subpkg/view/PaymentCode/PaymentCode'
		})
	}
	
	const toinfoPath = ()=> {
		uni.navigateTo({
			url:'/subpkg/view/personInfo/personInfo'
		})
	}
</script>

<style scoped lang="less">
	.page-content {
		padding: 24rpx;
	}

	.userInfo-box {
		padding-left: 24rpx;
		display: flex;

		.logo {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}

		.user-flex {
			display: flex;
            align-items: center;
			.userName {
				margin-right: 16rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: var(--maincolorf1);
			}

			.arrow-action {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.grade {
			width: 60rpx;
			height: 32rpx;
		}
	}

	.member-continar {
		padding: 32rpx 24rpx 0 24rpx;
		position: relative;
		margin-top: 24rpx;
		height: 320rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
        border-radius: 16rpx;
		.barcode {
			position: absolute;
			top: 0;
			right: 0;
			width: 112rpx;
			height: 112rpx;
		}

		.member-codebox {
			display: flex;
			align-items: center;

			.logo {
				width: 80rpx;
				height: 80rpx;
				border-radius: 12rpx;
			}

			.member-flex-box {
				margin-left: 17rpx;
				position: relative;
				.showicon {
					position: absolute;
					width: 48rpx;
					height: 32rpx;
					right: -100rpx;
				}
				.title-flex {
					display: flex;
					align-items: center;
					overflow: hidden;
					.title {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
						width: 300rpx; /* 设置固定宽度 */
						
					}
					.ani{
						white-space: nowrap; /* 防止换行 */
						animation: scroll 5s linear infinite;
					}
					@keyframes scroll {
					  0% {
					    transform: translateX(5%); /* 初始位置在右侧外面 */
					  }
					  100% {
					    transform: translateX(-60%); /* 最终位置在左侧外面 */
					  }
					}

				}
			}
		}

		.member-code {
			margin-top: 16rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: var(--maincolorf2);
		}

		.equity-box {
			padding-left: 100rpx;
			margin-top: 6rpx;
			display: flex;
			align-items: center;
			.equity-text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: var(--maincolorf4);
			}
			.equity-icon{
				width: 32rpx;
				height: 32rpx;
				background: var(--mainbaccolor10);
				border-radius: 50%;
				text-align: center;
			}
			.equity-up{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: var(--maincolorf5);
				margin-left: 20rpx;
			}
		}
	}

	.main-card-below {
		// margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
         padding-left: 15rpx;
		.card-below-item {
			flex: 1;
			position: relative;

			.below-item-value {
				width: 130rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 32rpx;
				padding-bottom: 16rpx;
				border-bottom: 3rpx solid  var(--dt-bordercolorPink);
				margin-bottom: 15rpx;
			}

			.below-item-title {
				width: 130rpx;
				padding-bottom: 39rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				line-height: 26rpx;
			}

			.below-item-icon {
				position: absolute;
				bottom: 34rpx;
				right: 13rpx;
				color: #999999;
				font-size: 22rpx;
				width: 26rpx;
				height: 26rpx;
				line-height: 26rpx;
				border-radius: 50%;
				border: 1px solid #999999;
				text-align: center;
				border-radius: 50%;
			}

			.below-item-tip {
				position: absolute;
				width: 300rpx;
				height: 112rpx;
				bottom: 60rpx;
				right: -280rpx;
				z-index: 990;
				background-image: url('https://oss.jtmckj.com/wmp/kbq/common/i_back_tip.png');
				background-repeat: no-repeat;
				background-size: contain;
				text-align: left;
				padding: 24rpx;

				.tip-title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					line-height: 40rpx;
				}
			}
		}
	}

	.member-card {
		padding: 0 15rpx;
		margin: 20rpx 0;
		height: 168rpx;
		background: var(--maincolor);
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;

		.grid-item {
			width: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			.grid-text {
				margin-top: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: var(--maincolorf1);
			}
		}
	}

	.equity-card {
		position: relative;
		height: 120rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-right: 24rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		border-radius: 12rpx;
		.equity-btn {
			width: 160rpx;
			height: 60rpx;
			background: var(--dt-backcolorPink);
			border-radius: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: var(--maincolor);
			line-height: 60rpx;
			text-align: center;
		}
	}
	.member-card2 {
		 padding: 45rpx 15rpx 10rpx 15rpx;
		 margin: 20rpx 0;
		 // height: 168rpx;
		 background: var(--maincolor);
		 border-radius: 16rpx;
		 display: flex;
		 flex-wrap: wrap;
		 justify-content: space-between;
		 
		 .grid-item {
			width: 145rpx;
		 	display: flex;
		 	justify-content: center;
		 	align-items: center;
		 	flex-direction: column;
		    margin-bottom: 40rpx;
		 	image {
		 		width: 60rpx;
		 		height: 60rpx;
		 	}
		 
		 	.grid-text {
		 		margin-top: 20rpx;
		 		font-family: PingFang SC;
		 		font-weight: 500;
		 		font-size: 28rpx;
		 		color: var(--maincolorf1);
		 	}
		 }
	}
	
	
	  .card-equity-vip{
		  width: 400rpx;
		  display: flex;
		  align-items: center;
		  margin-top: 15rpx;
		  font-size: 24rpx;
		  .cardDate{
			width: 85%;
			height: 34rpx;
			position: relative;
			overflow: hidden;
			view{
			  color: #fff;
			  font-size: 26rpx;
			  position: absolute;
			  white-space: nowrap; /* 禁止文本换行 */
			  animation: dateScroll 5s linear infinite;
			}
			@keyframes dateScroll {
			  0% {
				transform: translateX(5%);
			  }
			  100% {
				transform: translateX(-60%);
			  }
			}
		  }
		  .cardPay{
			color: #AF0000;
			font-size: 26rpx;
			margin-left: 10rpx;
			white-space: nowrap;
		  }
		}
		
			
		::v-deep .u-safe-bottom {
			display:none !important;
		}
</style>